// 全部订单  待支付  待收货
<template>
  <div class="content-right">
    <ul class="title">
      <li
        v-for="(item,key) in title"
        :key="key"
        :class="key == index ? 'active' : '' "
        @click="changesjump($event,key)"
      >
        {{item.name}}
        <i>( {{ item.num }} )</i>
      </li>
    </ul>

    <div class="details">
      <!-- 时间搜索 关键词搜索 -->
      <div class="flexk">
        <div class="block">
          <span class="demonstration">下单时间：</span>
          <el-date-picker
            v-model="value7"
            type="daterange"
            value-format="yyyy-MM-dd"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            size="small"
          ></el-date-picker>
        </div>
        <div class="block-right">
          <label>关键词：</label>
          <el-input placeholder="产品名称/订单号/商品编码" size="small" v-model="key_value"></el-input>
          <el-button @click="lookup" icon="el-icon-search" type="warning" size="small">查 找</el-button>
        </div>
      </div>
    </div>

    <ol class="TableHead">
      <li v-for="(item,index) in TableHead" :key="index">{{item}}</li>
    </ol>

    <div class="tablesk" v-loading="loading">
      <div class="tables" v-for="(list,index) in lists" :key="index">
        <h4>
          订单编号：{{ list.order_no }}
          <i>{{ list.create_at }}</i>
        </h4>
        <ol class="list">
          <ul class="OrderDetails">
            <li v-for="(item,index) in list.order_goods" :key="index">
              <img :src=" item.goods_logo ">
              <div>
                <p>{{ item.goods_title }}</p>
                <span>订货编码：WDF{{ item.goods_list_id }}-{{item.goods_id}}</span>
                <!-- <span>孚地订货号：{{ item.goods_spec}}</span> -->
              </div>
              <i>x {{ item.number }}</i>
            </li>
          </ul>
          <ul class="sanList">
            <li>
              <p>{{ list.receipt.consignee }}</p>
              <p>{{ list.receipt.phone }}</p>
            </li>
            <li>
              <template v-for="(btn,index) in list.order_goods">
                <div style="width:100%; height:95px; " :key="index">
                  <p
                    v-if="[0, 1, 2].includes(btn.status)"
                    style="width:100%; height:95px; line-height:95px; color:#ddd; font-size:12px;"
                  >订单尚未完成
                  </p>

                  <el-button
                    v-if="[3,4].includes(btn.status)"
                    type="text"
                    @click="ReturnGoods(btn, list.order_no, list.create_at)"
                    >退货
                  </el-button>
     
                  <el-button
                    v-if="btn.status > 4"
                    type="text"
                    @click="progress(btn, list.order_no, list.create_at)"
                    >退货进度
                  </el-button>
                </div>
              </template>
            </li>
            <li>
              <span>{{ list.goods_price }}</span>
              <i>（含运费 {{ list.freight_price }} 元）</i>
              
              <i v-if="list.pay_type == 1">wechat微信支付</i>
              <i v-else-if="list.pay_type == 2">alipay支付宝支付</i>
              <i v-else-if="list.pay_type == 3">线下支付</i>
              <i v-else></i>
            </li>
            <li>

              <bdi v-if="list.status == 0">未付款</bdi>
              <bdi v-else-if="list.status == 1">待发货</bdi>
              <bdi v-else-if="list.status == 2">已发货</bdi>
              <bdi v-else-if="list.status == 3">已收货</bdi>
              <bdi v-else-if="list.status == 4">未确认收款</bdi>
              <el-button 
                size="mini" 
                class="orderDetails" 
                @click="jumpDetails(list.order_no)"
                >订单详情
              </el-button>
            </li>
            <li>
              <template v-if=" [0, 4].includes(list.status)">
                <el-button
                  @click="ImmediatePayment(list.order_no)"
                  type="primary"
                  plain
                  size="mini"
                  style="margin:5px;"
                  v-if="list.status == 0"
                >立即付款</el-button>
                <i @click="jumpCart" class="RePurchase">重新选购</i>
                <i @click="cancelOrder(index, list.order_no)" class="cancelOrder">取消订单</i>
              </template>
            </li>
          </ul>
        </ol>
      </div>
    </div>
    <no-data :msg="msg" v-show="!lists.length"/>
    <template>
      <el-pagination
        v-show="index == 0"
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        @prev-click="prevClick"
        @next-click="nextClick"
        @current-change="currentChange1($event)"
      ></el-pagination>
      <el-pagination
        v-show="index == 1"
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        @prev-click="prevClick"
        @next-click="nextClick"
        @current-change="currentChange2($event)"
      ></el-pagination>
      <el-pagination
        v-show="index == 2"
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"

        @prev-click="prevClick"
        @next-click="nextClick"
        @current-change="currentChange3($event)"
      ></el-pagination>
    </template>
    
  </div>
</template>
<script>
export default {
  name: "fullOrder",

  props: {
    myKey: Number
  },

  data() {
    return {
      title: [
        {
          name: "全部订单",
          num: 0,
          id: 0
        },
        {
          name: "待付款",
          num: 0,
          id: 1
        },
        {
          name: "待收货",
          num: 0,
          id: 2
        }
      ],
      msg: '暂无相关数据...',
      key_value: '',  // key_value的值  
      page: 1,
      total: 1, // 总页数
      // 数据循环开始
      loading: false,
      lists: [],
      orderLists: [],
      // 数据循环结束
      index: 0,
      // 表格头的内容
      TableHead: [
        "订单详情",
        "收货人",
        "退货",
        "￥ 含税总额 (元)",
        "状态",
        "操作"
      ],
      value7: "", //时间选择器的
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    }
  },

  methods: {
    // 跳转进度
    progress(goods, order_no, create_at) {
      this.$store.commit("ReturnedGoods", { goods, order_no, create_at })
      this.$router.push({
        name: "ReturnGoods"
      })
    },
    async currentChange1(ev) {
      this.getInfo('index/web/myOrder', ev)
    },
      async currentChange2(ev) {
      this.getInfo('index/web/myOrderPrePayment', ev)
    },
      async currentChange3(ev) {
      this.getInfo('index/web/myOrderPreReceipt', ev)
    },

    prevClick() {
      console.log("上一页")
    },

    nextClick() {
      console.log("下一页 ")
    },

    async getInfo(url, page = 1) {
      this.loading = true
      let user_id = this.$store.state.UserInfor.user_id
      let res = await this.$http({
        method: 'post',
        url,
        data: {
          user_id,
          page
        }
      })
      console.log(res)
      if (res.data.State.Code == 200) {
        this.lists = res.data.data
        // 此处要判断显示的哪一种订单 
        if(this.index == 0){
          // 全部订单
          this.total = res.data.total
        }else if(this.index == 1){
          // 代付款
          this.total = res.data.pretotal
        }else if(this.index == 2){
          //待收货
          this.total = res.data.retotal
        }
             
        console.log(res.data.total)
        this.page = res.data.page
        if (url = '/api/index/web/myOrder') {
          this.title = [
            {
              name: "全部订单",
              id: 0,
              num: res.data.total
            },
            {
              name: "待付款",
              num: res.data.pretotal,
              id: 1
            },
            {
              name: "待收货",
              num: res.data.retotal,
              id: 2
            }
          ]
        }
      } else if (res.data.State.Code == 2005) {
        this.lists = []
      }
      this.loading = false

    },

    // 退换货
    ReturnGoods(goods, order_no, create_at) {
      console.log(goods, order_no)
      this.$store.commit("ReturnedGoods", { goods, order_no, create_at })
      this.$router.push({
        name: "ReturnGoods"
      })
    },

    // 取消订单
    async cancelOrder(index, order_no) {
      console.log(index, order_no)
      let res = await this.$http({
        method: 'post',
        url: '/api/index/web/delMyOrder',
        data: {
          order_no
        }
      })
      if (res.data.State.Code == 200) {
        let url = '/api/index/web/myOrder'
        if (this.index == 0) {
          url = '/api/index/web/myOrder'
        } else if (this.index == 1) {
          url = '/api/index/web/myOrderPrePayment'
        } else if (this.index == 2) {
          url = '/api/index/web/myOrderPreReceipt'
        }
        this.getInfo(url, 1)   // 
        this.$notify({
          title: '订单已经取消'
        })
      }
    },

    // 重新选购 跳转到购物车
    jumpCart() {
      this.$router.push({
        name: "shoppingCart",
        params: {}
      })
    },

    // 订单详情
    jumpDetails(orderNo) {
      this.$store.commit("OrderDetailsOrderNo", orderNo)
      this.$router.push({
        name: 'OrderDetails'
      })
    },
    // 立即支付按钮
    ImmediatePayment(order_no) {
      console.log("立即支付按钮")

      this.$store.commit("order_no", order_no)

      this.$router.push({
        name: "payment",
        params: {}
      })
    },

    // 查找按钮
    async lookup() {
      this.loading = true
      let user_id = this.$store.state.UserInfor.user_id,
        page = 1,
        code = '',
        begin_time = this.value7[0],
        end_time = this.value7[1],
        key_code = "",
        key_value = this.key_value

      if (this.index == 0) {
        code = "all"
      } else if (this.index == 1) {
        code = "prepayment"
      } else {
        code = "prereceipt"
      }

      if (this.key_value.startsWith("WD")) {
        key_code = "goods_no"   // 商品编码
      } else if (this.key_value.startsWith("FD")) {
        key_code = "order_no"   // 订单号
      } else if (!this.key_value) {
        key_code = ""   // 订单号
      } else {
        key_code = "goods_title"   // 名称搜索
      }


      console.log(
        user_id,
        page,
        code,
        begin_time,
        end_time,
        key_code,
        key_value
      )

      if (this.key_value || begin_time) {

        let res = await this.$http({
          method: 'post',
          url: '/api/index/web/myOrderSearch',
          data: {
            user_id,
            page,
            code,
            begin_time,
            end_time,
            key_code,
            key_value
          }
        })
        if (res.data.State.Code == 200) {
          console.log(res)
          this.lists = res.data.data
        } else if (res.data.State.Code == 2005) {
          this.$notify.error({
            title: '没有符合条件的搜索 请重新输入...'
          })
        }
        this.loading = false
      } else {
        this.$notify.error({
          title: '请输入查询条件...'
        })
      }


    },

    // 上面订单的导航
    changesjump(ev, key) {
      this.index = key
      console.log(this.index)
      switch (key) {
        case 0:
          this.getInfo('/api/index/web/myOrder', 1)
          break
        case 1:
          this.getInfo('/api/index/web/myOrderPrePayment', 1)
          break
        case 2:
          this.getInfo('/api/index/web/myOrderPreReceipt', 1)
          break
      }
    }
  },

  created() {
    this.getInfo('/api/index/web/myOrder', 1)
    console.log('触发了created')
  }

}
</script>
<style lang="scss" scoped>
.nodata {
  width: 100%;
  box-sizing: border-box;
  height: 300px;
  line-height: 300px;
  border: #ff9000 dashed 2px;
  margin-top: 30px;
  font-size: 100px;
  text-align: center;
  color: #fdaf4a62;
}
.el-popper {
  .logistics {
    div {
      &:nth-child(2) {
        p {
          &:first-child {
            color: #ff9000;
          }
        }
      }
    }
  }
}
.content-right {
  width: 970px;
  background: #fff;
  padding: 15px;
  // padding-bottom: 800px;
  margin-bottom: 30px;
  .el-pagination {
    margin-top: 50px;
    margin-bottom: 30px;
    text-align: center;
  }
  .title {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    li {
      line-height: 56px;
      font-size: 16px;
      text-align: center;
      padding: 5px 10px;
      letter-spacing: 1.5px;
      margin: 0 15px;
      cursor: pointer;
      i {
        color: #ff9000;
      }
    }
    .active {
      color: #ff9000;
      line-height: 56px;
      font-weight: bold;
      border-bottom: #ff9000 solid 2px;
    }
  }
  .details {
    width: 956px;
    margin: auto;
    .flexk {
      display: flex;
      flex-direction: row;
      align-items: center;
      .block {
        margin-top: 26px;
        margin-bottom: 26px;
        margin-right: 20px;
      }
      .block-right {
        .el-input {
          width: 300px;
        }
      }
    }
  }
  .TableHead {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #f3f3f3;
    line-height: 40px;
    border: 1px solid #e3e3e3;
    li {
      font-size: 14px;
      color: #2d2d2d;
      width: 133px;
      text-align: center;
      font-weight: bold;
      &:nth-child(1) {
        width: 300px;
        text-indent: 22px;
        text-align: left;
      }
    }
  }
  .tables {
    font-size: 12px;
    border: 1px solid #e5e5e5;
    margin-top: 15px;
    h4 {
      color: #8d8d8d;
      line-height: 40px;
      text-indent: 22px;
      background: #fafafa;
      position: relative;
      i {
        padding-left: 30px;
        font-weight: lighter;
      }
      img {
        position: absolute;
        top: 7px;
        right: 10px;
        width: 24px;
        height: 24px;
        display: none;
      }
      &:hover {
        img {
          display: block;
          cursor: pointer;
        }
      }
    }
    .list {
      display: flex;
      flex-direction: row;
      align-items: center;
      .OrderDetails {
        li {
          width: 300px;
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
          img {
            width: 65px;
            height: 65px;
            padding: 15px;
          }
          div {
            width: 180px;
            p {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            span {
              font-size: 12px;
              color: #8d8d8d;
              display: block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          i {
            width: 78px;
            text-align: center;
            color: #8d8d8d;
          }
        }
      }
      .sanList {
        display: flex;
        flex-direction: row;
        align-items: center;
        li {
          width: 133px;
          text-align: center;
          &:nth-child(2) {
            .el-button {
              line-height: 70px;
              margin-left: 0px;
            }
          }
          span {
            font-weight: bold;
            color: #ff0000;
            display: block;
          }
          bdi {
            font-weight: bold;
            color: #0078ff;
            display: block;
          }
          i {
            color: #575757;
            line-height: 24px;
            display: block;
            cursor: pointer;
            // font-weight: bold;
          }
          strong {
            color: #f40;
            line-height: 24px;
          }
          .orderDetails {
            &:hover {
              color: #0078ff;
            }
          }
          .RePurchase {
            &:hover {
              color: #0078ff;
            }
          }
          .cancelOrder {
            &:hover {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }
}
</style>
